import React, { Component } from 'react'
import axios from 'axios'
import BetterScroll from 'better-scroll'

export default class Cinema extends Component {
  state = {
    cinemaList: [],
    copyList: []
  }
  constructor() {
    super()

    axios({
      url: 'https://m.maizuo.com/gateway?cityId=320100&ticketFlag=0&k=9399217',
      method: 'get',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16696263405721660942450689","bc":"320100"}',
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    })
      .then(res => {
        // console.log(res.data.data.cinemas);
        this.setState({
          cinemaList: res.data.data.cinemas,
          copyList: res.data.data.cinemas
        })
        new BetterScroll('.box')
      })
      .catch(err => console.log(err))

  }
  render() {
    return (
      <div>
        <input onChange={this.doSearch} />
        <div className='box'>
          <div className="content">
            {
              this.state.cinemaList.map(item =>
                <dl key={item.cinemaId}>
                  <dt>{item.name}</dt>
                  <dd>{item.address}</dd>
                </dl>
              )
            }
          </div>
        </div>
      </div>
    )
  }

  doSearch = (e) => {
    // console.log(e.target.value,this.state.cinemaList);
    let newList = this.state.copyList.filter(item =>
      item.name.toUpperCase().includes(e.target.value.toUpperCase())
    )
    console.log(newList);
    this.setState({
      cinemaList: newList
    })
  }
}
